<template>
    <div>
        <h1 style="text-align: left;">薪资项</h1><br>
        
        <el-form :model="formData" ref="form" :rules="rules" label-width="80px" :inline="true" style="display: flex; flex-direction: column; gap: 16px; text-align: left;">
            
            <el-form-item label="">
                
                <el-row :gutter="20" style="width: 100%;">
                    <el-col :span="12" :offset="0">
                        <span>部门</span>
                        <el-select 
                            v-model="formData.departmental"
                            
                            placeholder="请选择员工部门"
                            clearable
                        >
                            <el-option 
                                v-for="emp in departmentalList" 
                                :key="emp.id" 
                                :label="emp.deptName" 
                                :value="emp.deptName"
                            ></el-option>
                        </el-select>
                        <span>岗位工资</span>
                        <el-input v-model="formData.baseSalary"></el-input>
                        <span>工龄补贴</span>
                        <el-input v-model="formData.seniorityWages"></el-input>
                        <span>交通补贴</span>
                        <el-input v-model="formData.transportationSubsidy"></el-input>
                        <span>餐饮补贴</span>
                        <el-input v-model="formData.mealSubsidy"></el-input>
                    </el-col>
                    
                    <el-col :span="12" :offset="0">
                        <span>岗位</span>
                        <el-select 
                            v-model="formData.postsName"
                            
                            placeholder="请选择员工岗位"
                            clearable
                        >
                            <el-option 
                                v-for="emp in postsList" 
                                :key="emp.id" 
                                :label="emp.postName" 
                                :value="emp.postName"
                            ></el-option>
                        </el-select>
                        <span >绩效工资</span>
                        <el-input v-model="formData.paySalary"></el-input>
                        <span>基本奖金</span>
                        <el-input v-model="formData.bonus"></el-input>
                        <span>住房补贴</span>
                        <el-input v-model="formData.housingAllowance"></el-input>
                        <span>其他补贴</span>
                        <el-input v-model="formData.otherSubsidies"></el-input>
                    </el-col>                       
                </el-row>                                
            </el-form-item>
            <el-form-item  style="margin-top: auto; align-self: flex-start;">
                <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, defineEmits, onMounted } from 'vue';
import request from '@/api/request.js';
import { ElMessage } from 'element-plus';

let emits = defineEmits(['ref-table']);

let formData = ref({});

let departmentalList = ref([]);
let postsList = ref([]);

// 提交表单处理函数
const onSubmit = () => {
    // 验证部门和岗位是否已选择
    if (!formData.value.departmental) {
        ElMessage.warning('请选择部门');
        return;
    }
    if (!formData.value.postsName) {
        ElMessage.warning('请选择岗位');
        return;
    }
    
    // 先查询该部门和岗位是否已有数据
    request({
        url: '/salary/setup/disposition/find',
        method: 'get',
        params: {
            departmental: formData.value.departmental,
            postsName: formData.value.postsName
        }
    }).then(res => {
        // 检查是否存在数据（根据实际接口返回格式调整判断条件）
        if (res.data && (res.data.length > 0 || Object.keys(res.data).length > 0)) {
            ElMessage.warning('该部门和岗位的薪资数据已存在');
        } else {
            // 不存在则执行添加操作
            request({
                url: '/salary/setup/disposition/disposition',
                method: 'post',
                data: formData.value
            }).then(() => {
                ElMessage.success('添加成功');
                emits('ref-table'); // 通知父组件刷新列表
                formData.value = {}; // 重置表单
            }).catch(error => {
                console.error('添加失败:', error);
                ElMessage.error('添加失败，请重试');
            });
        }
    }).catch(error => {
        console.error('查询失败:', error);
        ElMessage.error('查询失败，请重试');
    });
};

// 初始化数据
onMounted(() => {
    findDepartments();
    findPosts();
});

// 获取部门列表
const findDepartments = () => {
    request({
        url: '/department/find',
        method: 'get'
    }).then(res => {
        if (res.data) {
            departmentalList.value = res.data;
        }
    }).catch(error => {
        console.error('获取部门列表失败:', error);
        ElMessage.error('获取部门列表失败');
    });
};

// 获取岗位列表
const findPosts = () => {
    request({
        url: '/system/permission/post/find',
        method: 'get'
    }).then(res => {
        if (res.data) {
            postsList.value = res.data;
        }
    }).catch(error => {
        console.error('获取岗位列表失败:', error);
        ElMessage.error('获取岗位列表失败');
    });
};
</script>

<style scoped>

</style>
